import React from "react";
import { cityList } from "/public/cities.json";
import { IndexBar, List } from 'antd-mobile'
import { useSearchParams,useNavigate } from "react-router-dom";

const City = () => {
  const [searchParams]=useSearchParams()
  const navigate=useNavigate()
  const handleBackCity=(name)=>{
    const type=searchParams.get('type')
    if(type=='start'){
      localStorage.setItem('start',name)
      navigate('/home')
    }else{
      localStorage.setItem('end',name)
      navigate('/home')

    }
  }
  return <div>
       <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {cityList.map(group => {
          const { title, citys } = group
          return (
            <IndexBar.Panel
              index={title}
              title={title}
              key={title}
            >
              <List>
                {citys.map((item, index) => (
                  <List.Item key={index} onClick={()=>handleBackCity(item.name)}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
  </div>;
};

export default City;
